<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{border:solid 1px black;}  
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs")
  cvs.width = cvs.height = 400;

  const c2d = cvs.getContext("2d");

  // 创建线性渐变的区域
  const lg = c2d.createLinearGradient(0, 0, 100, 0);
  // 添加线性渐变区域的颜色
  lg.addColorStop(0, "red");
  lg.addColorStop(0.25, "blue");
  lg.addColorStop(0.5, "yellow");
  lg.addColorStop(0.75, "pink");
  lg.addColorStop(1, "green");
  // 将配置好的渐变色设置到填充色
  c2d.fillStyle = lg;
  c2d.rect(0, 0, 100, 100);
  c2d.fill();

  // =========

  c2d.beginPath();

  // 创建镜像渐变区域
  // const rg = c2d.createRadialGradient(100, 100, 50, 250, 250, 80);
  const rg = c2d.createRadialGradient(200, 200, 1, 200, 200, 200);
  // 添加径向渐变颜色
  rg.addColorStop(0, "red");
  rg.addColorStop(0.35, "green");
  rg.addColorStop(0.65, "blue");
  rg.addColorStop(1, "yellow");
  // 使用镜像渐变
  c2d.fillStyle = rg;

  c2d.rect(200, 0, 200, 200);
  c2d.fill();


</script>
</html>